<template>
    <div style="height: 100%">
        <div class="title">基本详情</div>
        <el-row>
            <el-col :span="4">
                <div class="info"><span class="label">工单编号</span>{{ orders[idx].orderId }}</div>
                <div class="info"><span class="label">产品规格</span>{{ orders[idx].productSpecification }}</div>
                <div class="info"><span class="label">客户</span>{{ orders[idx].customerName }}</div>
                <div class="info"><span class="label">制作人</span>{{ orders[idx].employeeName }}</div>
                <div class="info"><span class="label">上传图纸</span>{{ orders[idx].drawingUrl }}</div>
            </el-col>
            <el-col :span="4">

            </el-col>
            <el-col :span="4">
                <div class="info"><span class="label">紧急加单</span>{{ orders[idx].idUrgent ==='0'? '不加急':'加急' }}</div>
                <div class="info"><span class="label">交货日期</span>{{ orders[idx].deliveryDate }}</div>
                <div class="info"><span class="label">生产订单</span>{{ orders[idx].productionOrderId }}</div>
                <div class="info"><span class="label">备注</span>{{ orders[idx].remarks }}</div>
            </el-col>
            <el-col :span="2">

            </el-col>
            <el-col :span="8">
                <el-table :data="bomTable" height="200">
                    <el-table-column prop="idMat" label="物料编码"></el-table-column>
                    <el-table-column prop="name" label="物料名称"></el-table-column>
                    <el-table-column prop="model" label="规格"></el-table-column>
                    <el-table-column prop="unit" label="单位"></el-table-column>
                    <el-table-column prop="prop" label="使用比例"></el-table-column>

                    <el-table-column label="操作">
                        <template #default="scope">
                            <div style="display: flex;justify-items: center">
                                <bar-icon style="cursor:pointer;" :icon="'edit'" :color="'#3475fe'" :width="15" :height="15"/>
                                <bar-icon style="margin-left: 10px;cursor:pointer;" :icon="'delete'" :color="'#ff4747'" :width="15" :height="15"/>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <div class="title">工单详情</div>
        <el-row>
            <el-col :span="4">
                <div class="info"><span class="label">工单状态</span>{{ plans[idx].orderStatus === '1'? '生产中':'已完成' }}</div>
                <div class="info"><span class="label">当前计划完成</span>{{ plans[idx].completionQuantity/plans[idx].plannedQuantity*100}}%</div>
<!--                <div class="info"><span class="label">生产部门</span>-->
<!--                    <div style="display: flex;justify-items: center">-->
<!--                        <div style="margin-right: 10px;margin-left: 10px">部门1</div>-->
<!--                        <div style="margin-right: 10px;margin-left: 10px">部门2</div>-->
<!--                        <div style="margin-right: 10px;margin-left: 10px">部门3</div>-->
<!--                    </div>-->
<!--                </div>-->

            </el-col>
            <el-col :span="4">

            </el-col>
            <el-col :span="4">
                <div class="info"><span class="label">计划时间</span>{{ plans[idx].plannedDate}}</div>
                <div class="info"><span class="label">完成数量</span>{{ plans[idx].plannedQuantity}}</div>
            </el-col>
            <el-col :span="4">

            </el-col>
            <el-col :span="4">
                <div class="info"><span class="label">实际时间</span>{{ plans[idx].completionDate}}</div>
                <div class="info"><span class="label">入库数量</span>{{ plans[idx].completionQuantity}}</div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import BarIcon from "../../widget/icon/BarIcon.vue";
import mdApi from "@/util/request.js";
export default {
    props:['orders','bom','plans','idx'],
    components:{
        BarIcon,
    },
    watch:{
        orders(newVal,oldVal){
            mdApi.getProductBOMs(newVal[this.idx].orderId,((res) => {
                if (res.code === 200) {
                    this.bomTable = res.data;
                } else {
                    this.$message.error("网络不佳，请稍后再试");
                }
            }))
        }
    },
    data() {
        return {
            bomTable: []
        }
    },
    methods:{
        handleDelete(data){

        },
        handleUpdate(data){

        }
    },
    // mounted() {
    //     console.log(this.orders[this.idx].orderId,">>>拿到了订单ID");
    // }
}
</script>
<style scoped>
.title {
    color: #1c1f2a;
    font-size: 18px;
    font-weight: 600;
    margin: 40px 0 20px 0;
}

.label {
    color: #8d8d8d;
    margin-right: 15px;
    text-align: right;
}

.info {
    padding: 14px;
    font-size: 16px;

}
</style>